require('./PageLsgdmain.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import AmapActions from '../../../components/amap/Actions'
import { Map} from 'react-amap';
import Geolocation from '../../../components/geolocation'
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea,
  MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,
  MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea,ActionSheet,Flex,FlexItem,SearchBar} from  'react-weui/build/packages'
import MFooter from '../../../components/mfooter/index'
import {Control} from 'react-keeper';
import construction  from './../../../assets/icon/zhzj/施工单位.png';
import paihang  from './../../../assets/img/paihang.png';
import first  from './../../../assets/img/first.png';
import second  from './../../../assets/img/second.png';
import third  from './../../../assets/img/third.png';
import zaoyin from './../../../assets/icon/yc/ico_1.png';
import pm25  from './../../../assets/icon/yc/ico_5.png';
import pm10  from './../../../assets/icon/yc/ico_4.png';
import loudou  from './../../../assets/img/loudou.png';
import 'weui';
import 'react-weui/build/packages/react-weui.css';

class Lsgdmain extends React.Component {

  constructor(props) {
    super(props);
    this.closeActionSheet = this.closeActionSheet.bind(this);
    this.showActionSheet = this.showActionSheet.bind(this);
    this.toDistrictDetail = this.toDistrictDetail.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
  }

  showActionSheet() {
    Actions.showActionSheet();
  }

  closeActionSheet() {
    Actions.closeActionSheet();
  }

  toDistrictDetail() {
    Actions.toDistrictDetail(Control);
  }

  handleChange(text) {
    Actions.handleChange(text);
  }

  handleCancel() {
    Actions.handleCancel();
  }


  render() {

    return (
      <Page className="lsgdmain" infiniteLoader={false} ptr={false}>
        <SearchBar onChange={this.handleChange}
                   onCancel={this.handleCancel}
                   defaultValue={this.state.lsgdmain.searchText}
                   placeholder="搜索工程"
        >
        </SearchBar>


        <div onClick={this.handleCancel}
             style={{display: this.state.lsgdmain.searchDivShow ? null : 'none',zIndex:'999',position:'absolute',width:'100%',height: window.innerHeight, overflow: 'scroll',backgroundColor:'#fff'}}>
          {
            this.state.lsgdmain.searchDivShow &&

            <Panel>
              <PanelHeader>
                搜索结果
              </PanelHeader>
              <PanelBody>
                { this.state.lsgdmain.searchData.length > 0 ? this.state.lsgdmain.searchData.map((item, i)=> {
                  return (
                    <MediaBox type="appmsg" onClick={() =>
                    {Control.go('/lsgdhome/lsgdgdDetail',{
                      pcode:item.pcode
                    })}}>
                      <MediaBoxHeader>
                        <img src={construction} style={{
                          width:30,
                          height:30,
                          marginTop:15
                        }}/>
                      </MediaBoxHeader>
                      <MediaBoxBody>
                        <MediaBoxTitle>{item.pname}</MediaBoxTitle>
                        <MediaBoxDescription>
                          <span className="pname">{item.city}</span>
                        </MediaBoxDescription>
                      </MediaBoxBody>
                    </MediaBox>
                  )
                }) : <MediaBox>没有搜索到数据！</MediaBox>
                }
              </PanelBody>
            </Panel>

          }
        </div>
        <Cells style={{
            backgroundColor:"#4778AA",
            marginTop:0,
            borderTopLeftRadius:"5px",
            borderTopRightRadius:"5px"
          }}>
          <Cell>
            <CellBody style={{
                color:"#FFFFFF"
              }}>
              {this.state.lsgdmain.city}
            </CellBody>
            <CellFooter style={{
                color:"#FFFFFF"
              }}>

            </CellFooter>
          </Cell>
        </Cells>
        <Flex>
          <FlexItem>
            <div className="pmvalue">
              <label className="bigvalue">{this.state.lsgdmain.pm25}</label>
              <label className="bigcandy">{this.state.lsgdmain.quality}</label>
            </div>
          </FlexItem>
        </Flex>

        <Flex>
          <FlexItem>
            <div className="jianceshujuxiangqing">
              <div className="jcsjxq_qianlanse" onClick={this.toDistrictDetail}>
                <label className="jcsjxq">监测数据详情&nbsp;&nbsp;></label>
              </div>
            </div>
          </FlexItem>
        </Flex>
        <Flex>
          <FlexItem>
            <div className="tuorchart">
            </div>
          </FlexItem>
        </Flex>
        <Flex>
          <FlexItem>
            <div className="wenxintishi">
              <label className="wenxintishineirong">
                温馨提示：{this.state.lsgdmain.affect}。{this.state.lsgdmain.measure}
              </label>
            </div>
          </FlexItem>
        </Flex>
        <Panel>
          <PanelHeader>
            <img src={paihang}
                 style={{
                 }}/>
            &nbsp;
            工程排行
            &nbsp;
            <img src={loudou} onClick={this.showActionSheet}
                 style={{
                 }}/>
            <ActionSheet
              menus={this.state.lsgdmain.menus}
              actions={this.state.lsgdmain.act}
              show={this.state.lsgdmain.iosShow}
              type="ios"
              onRequestClose={this.closeActionSheet}
            />
          </PanelHeader>
          <PanelBody>
            {
              this.state.lsgdmain.projectOrder.length > 0 ?
                this.state.lsgdmain.projectOrder.map((item, i)=> {
                  return (
                    <MediaBox type="appmsg" onClick={()=>{Control.go(`/lsgdhome/lsgdgdDetail/${item.pcode}`)}}>
                      <MediaBoxHeader>
                        <img style={{
                      width:31,
                      height:30
                    }} src={i==0?first:i==1?second:i==2?third:construction}/>
                      </MediaBoxHeader>
                      <MediaBoxBody>
                        <MediaBoxTitle>{item.pname}</MediaBoxTitle>
                        <MediaBoxDescription>
                          <Flex>
                            <FlexItem>
                              <img height="30" width="30" src={pm25}/> {item.pmTwo}
                            </FlexItem>
                            <FlexItem>
                              <img height="30" width="30" src={pm10}/> {item.pmTen}
                            </FlexItem>
                            <FlexItem>
                              <img height="30" width="30" src={zaoyin}/> {item.tsp}
                            </FlexItem>


                          </Flex>
                        </MediaBoxDescription>
                      </MediaBoxBody>
                    </MediaBox>
                  )
                })
                :
                <Panel>
                  <PanelBody>
                    <MediaBox>没有数据</MediaBox>
                  </PanelBody>
                </Panel>
            }
          </PanelBody>
        </Panel>
        <Toast icon="loading" show={this.state.lsgdmain.showLoading}>Loading...</Toast>
      </Page>

    );
  }

  componentWillMount() {

  }

  componentDidMount() {
    if (!this.state.lsgdmain.positionResult.formatted_address) {

      Actions.loadingControl(true);
      wx.getLocation({
        type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          Actions.setPositionResult(res);
        }
      });
    }
  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.lsgdmain || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Lsgdmain, Reflux.connect(Store, 'lsgdmain'));


export default Lsgdmain ;
